<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-common-mt">
            <form>
                <view class="uni-list">
                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            <view class="uni-label">图片来源</view>
                        </view>
                        <view class="uni-list-cell-right">
                            <picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
                                <view class="uni-input">{{sourceType[sourceTypeIndex]}}</view>
                            </picker>
                        </view>
                    </view>

                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            <view class="uni-label">图片质量</view>
                        </view>
                        <view class="uni-list-cell-right">
                            <picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
                                <view class="uni-input">{{sizeType[sizeTypeIndex]}}</view>
                            </picker>
                        </view>
                    </view>

                    <view class="uni-list-cell">
                        <view class="uni-list-cell-left">
                            <view class="uni-label">数量限制</view>
                        </view>
                        <view class="uni-list-cell-right">
                            <picker :range="count" @change="countChange" mode="selector">
                                <view class="uni-input">{{count[countIndex]}}</view>
                            </picker>
                        </view>
                    </view>
                </view>


                <view class="uni-list list-pd">
                    <view class="uni-list-cell cell-pd">
                        <view class="uni-uploader">
                            <view class="uni-uploader-head">
                                <view class="uni-uploader-title">点击可预览选好的图片</view>
                                <view class="uni-uploader-info">{{imageList.length}}/9</view>
                            </view>
                            <view class="uni-uploader-body">
                                <view class="uni-uploader__files">
                                    <block v-for="(image,index) in imageList" :key="index">
                                        <view class="uni-uploader__file">
                                            <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
                                        </view>
                                    </block>
                                    <view class="uni-uploader__input-box">
                                        <view class="uni-uploader__input" @tap="chooseImage"></view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </form>
        </view>
    </view>
</template>
<script>
    // #ifdef APP-PLUS
    import permision from "@/common/permission.js"
    // #endif
    var sourceType = [
        ['camera'],
        ['album'],
        ['camera', 'album']
    ]
    var sizeType = [
        ['compressed'],
        ['original'],
        ['compressed', 'original']
    ]
    export default {
        data() {
            return {
                title: 'choose/previewImage',
                imageList: [],
                sourceTypeIndex: 2,
                sourceType: ['拍照', '相册', '拍照或相册'],
                sizeTypeIndex: 2,
                sizeType: ['压缩', '原图', '压缩或原图'],
                countIndex: 8,
                count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            }
        },
        onUnload() {
            this.imageList = [],
                this.sourceTypeIndex = 2,
                this.sourceType = ['拍照', '相册', '拍照或相册'],
                this.sizeTypeIndex = 2,
                this.sizeType = ['压缩', '原图', '压缩或原图'],
                this.countIndex = 8;
        },
        methods: {
            sourceTypeChange: function(e) {
                this.sourceTypeIndex = e.target.value
            },
            sizeTypeChange: function(e) {
                this.sizeTypeIndex = e.target.value
            },
            countChange: function(e) {
                this.countIndex = e.target.value;
            },
            chooseImage: async function() {
                // #ifdef APP-PLUS
                // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
                if (this.sourceTypeIndex !== 2) {
                    let status = await this.checkPermission();
                    if (status !== 1) {
                        return;
                    }
                }
                // #endif

                if (this.imageList.length === 9) {
                    let isContinue = await this.isFullImg();
                    console.log("是否继续?", isContinue);
                    if (!isContinue) {
                        return;
                    }
                }
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    sizeType: sizeType[this.sizeTypeIndex],
                    count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length :
                        this.count[this.countIndex],
                    success: (res) => {
                        this.imageList = this.imageList.concat(res.tempFilePaths);
                    },
                    fail: (err) => {
                        // #ifdef APP-PLUS
                        if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
                            this.checkPermission(err.code);
                        }
                        // #endif
                    }
                })
            },
            isFullImg: function() {
                return new Promise((res) => {
                    uni.showModal({
                        content: "已经有9张图片了,是否清空现有图片？",
                        success: (e) => {
                            if (e.confirm) {
                                this.imageList = [];
                                res(true);
                            } else {
                                res(false)
                            }
                        },
                        fail: () => {
                            res(false)
                        }
                    })
                })
            },
            previewImage: function(e) {
                var current = e.target.dataset.src
                uni.previewImage({
                    current: current,
                    urls: this.imageList
                })
            },
            async checkPermission(code) {
                let type = code ? code - 1 : this.sourceTypeIndex;
                let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
                    await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
                        'android.permission.READ_EXTERNAL_STORAGE');

                if (status === null || status === 1) {
                    status = 1;
                } else {
                    uni.showModal({
                        content: "没有开启权限",
                        confirmText: "设置",
                        success: function(res) {
                            if (res.confirm) {
                                permision.gotoAppSetting();
                            }
                        }
                    })
                }

                return status;
            }
        }
    }
</script>

<style>
    .cell-pd {
        padding: 22upx 30upx;
    }

    .list-pd {
        margin-top: 50upx;
    }
</style>
